<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="cart.is_selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="cart.course_img" alt="">
        <span><router-link :to="`/course/${cart.id}`">{{cart.name}}</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
          <el-option v-for="item in cart.expire_list" :label="item.expire_text" :value="item.expire_time" :key="item.expire_time"></el-option>

        </el-select>
      </div>
      <div class="cart_column column_4">¥{{cart.price}}</div>

      <el-button type="danger" @click="deleteHander">删除</el-button>
<!--      <div class="cart_column column_4" ><button>删除</button></div>-->
    </div>
</template>

<script>
    export default {
        name: "CartItem",
        props:["cart"],
        watch:{
          "cart.is_selected":function (value) {
              // console.log(value)//点击显示true或者false
              this.selectedChange()
              this.$emit("changeprice");

          },
            "expire":function (value) {
              // console.log(value)
                this.cart.expire_list.forEach((item,key)=>{

                     if(item.expire_time  == value){
                         this.cart.price = item.price;
                         //发送请求
                         this.$axios.put(`${this.$settings.Host}/cart/course/put/`,{
                             course_id:this.cart.id,
                             expire:item.expire_time,//有效时间
                         },{
                             headers:{
                                 "Authorization": "jwt " + this.check_user_login(),
                             }
                         }).then(response=>{
                             this.$message({message:"有效期切换成功",type:"success"})
                         }).catch(error=>{
                              this.$message(error.response.message)
                         })
                    }
                });
                this.$emit("changeprice");

            }
        },
        data(){
            return{
                checked:false,
                expire:-1,
            }
        },
        methods:{
            check_user_login(){
              //检查用户是否登录了
              let user_token=localStorage.user_token || sessionStorage.user_token;
                if(!user_token){
                    //判断用户是否登录了
                    this.$confirm("对不起,你尚未登录! 请登录后继续操作!","警告").then(()=>{
                        this.$router.push("/user/login");
                    })
                }
                return user_token
            },
            selectedChange(){
                let course_id=this.cart.id;
                let is_selected=this.cart.is_selected;
                 let user_token=sessionStorage.user_token || localStorage.user_token;

                this.$axios.patch(`${this.$settings.Host}/cart/course/patch/`,{
                    course_id,
                    is_selected:Boolean(is_selected),
                },{
                    headers:{
                      "Authorization": "jwt " + this.check_user_login(),
                  }
                }).then(response=>{
                    this.$message({message:"切换商品勾选状态成功",type:'success'})


                }).catch(error=>{
                    this.$message("对不起,切换勾选状态失败!")
                })
            },
            deleteHander(){
                //删除商品
                //发送ajax请求 删除当前商品
                this.$axios.delete(`${this.$settings.Host}/cart/course/delete/`,{
                    params:{
                        course_id:this.cart.id
                    },
                    headers:{
                        "Authorization":"jwt " + this.check_user_login(),
                    },
                }).then(response=>{

                    this.$message({message:"移除商品成功!",type:"warning"})
                    //删除成功以后 通过子组件传递删除状态给父组件 让父组件把当前组件删除

                }).catch(error=>{
                    this.$message("移除商品发生异常,请联系客服工作人员!")
                })

                  this.$emit("delete",this.cart.id);
            }
        }
    }
</script>

<style scoped>

.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 250px;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}
.cart_item .column_2 img{
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}
</style>
